import React, { PureComponent } from 'react'
import { connect } from 'react-redux';
import {
  WriterWrapper,
  WriterTitle,
  WriterContent,
  WriterItem
} from '../style'


class Writer extends PureComponent {
  formData(data){
    let newData = (data|| 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1.');
    return parseFloat(newData).toFixed(1)
  }
  render() {
    return (
      <WriterWrapper>
        <WriterTitle>
          <span className="recommdwriter">推荐作者</span>
          <span className="changewriter"><i className="iconfont">&#xe870;</i>换一批</span>
        </WriterTitle>
        <WriterContent>
          {
            this.props.recommdList.map(item => {
              return (
                <WriterItem key={item.get('id')}>
                  <img src={item.get('avatar_source')} alt="" />
                  <div className="itemCenter">
                    <p className="writername">{item.get("nickname")}</p>
                    <p className="number">写了{
                      this.formData(item.get('total_wordage'))
                    }k字 · {
                      this.formData(item.get("total_liskes_count"))
                    }k喜欢</p>
                  </div>
                  <p className="see"><i className="iconfont">&#xe6cd;</i>关注</p>
                </WriterItem>
              )
            })
          }
        </WriterContent>
        <div className="find-more">
          查看全部 <i className="iconfont">&#xe600;</i>
        </div>
      </WriterWrapper>
    )
  }
  componentDidMount() {
    
  }
}

const mapState = state => ({
  recommdList: state.getIn(['home', 'recommdList']),
})



export default connect(mapState, null)(Writer)